<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div @mousedown="move" @keyup.left="moveOnePix('left', -1)" @keyup.up="moveOnePix('top', -1)"
        @keyup.down="moveOnePix('top', 1)" @keyup.right="moveOnePix('left', 1)" tabindex="1">
        <slot></slot>
    </div>
</template>

<script>
export default {
    components: {},
    data () {
        return {
            loading: false
        };
    },

    //注册局部组件指令
    directives: {},

    props: {
        canMove: { type: Boolean, default: false },
        left: { type: Number, default: 0 },
        top: { type: Number, default: 0 }
    },

    mounted: function () { },

    computed: {},

    methods: {
        moveOnePix: function (name, val) {
            var pos = { left: this.left, top: this.top }
            pos[name] += val
            this.$emit('move', pos)
            console.log('通过键盘触发移动', pos)
        },
        move: function (e) {
            if (this.canMove != true) {
                return false
            }
            var _this = this;
            //算出鼠标相对元素的位置
            console.log("鼠标按下");
            let disX = e.clientX - _this.left;
            let disY = e.clientY - _this.top;
            document.onmousemove = e => {
                //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX;
                let top = e.clientY - disY;
                console.log("鼠标移动", left, top);
                _this.$emit("move", { left: left, top: top });
            };
            document.onmouseup = e => {
                console.log('鼠标弹起')
                //鼠标弹起来的时候不再移动
                document.onmousemove = null;
                //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
                document.onmouseup = null;
            };
        }
    }
};
</script>
